Day 9 用 WordPress 看 CSS 樣式：版面配置 (grid 與 @media)

第 12 屆 iThome 鐵人賽

DAY 9

自我挑戰組

WordPress 客製化從 0 開始系列第 9 篇

12th鐵人賽 wordpress css grid media query

Eric 桓桓

2020-09-10 23:53:42

2215 瀏覽

分享至

昨天我們說明了 flex 以直線為排列單位的配置樣式。今天，我們要再來進一步的探討 grid 這種版面樣式。

display: grid;

事實上，grid 的設計並不是要取代 flex 的。在當代網頁開發中，flex 與 grid 是相輔相成的。前者負責直線的排版，後者則進行平面排版。

樣式 grid 的基本語法如下：

選擇器 {
    display: grid;
    樣式屬性: 屬性值;
}

有關 grid 的完整介紹，可以參考 CSS Tricks 的文章，中文文章的話，可以參考 wcc723 的文章，也有相當完整的介紹。

樣式屬性 | 屬性值 | 說明
-------+-------+-------
grid-template-columns | 個別欄位寬度/repeat | 可以指定每一欄的寬度，除了常見的單位 (px/em/rem) 外，還有一種 grid 專屬的特殊單位 fr。
grid-template-rows | 個別列高度/repeat | 可以指定每一列的高度，支援的單位與 columns 一樣。
grid-template-areas | "子層級 grid 區域名稱" | 定義子層級的區塊名稱。
grid-column-gap | px/em/rem | 指定每一欄之間的間距。
grid-row-gap | px/em/rem | 指定每一列之間的間距。
grid-gap | {px/em/rem} {px/em/rem} | 先指定列間距，再指定欄間距。

這裡補充說明一下 grid-template-areas 的定義方式，是很直接的把你要界定範圍的區域寫下來：

grid-template-areas: 
    "header header header header
     sidebar content content content
     sidebar content content content
     sidebar content content content
     footer footer footer footer";

除了定義區域外，前面也提到 grid 的特殊單位：fr。這個單位並不是固定值，而是參考子層級元素的大小決定。舉例來說，目前子元素中，有一張 600px 寬的照片，這時所有子層級元素的 1fr 就會是 600px。這一點對計算 grid 的版面非常重要。

子層級樣式屬性

與 flex 的子層級項目不同，grid 的子層級元素必須要指定格線間的位置。因為是用「線」來計算，因此如果今天指定的區塊有 3 欄，那麼對齊的格線就會是 1 ~ 4。那麼，我們就來看一下子層級元素所需要的樣式屬性：

Twenty Twenty 的樣式中，並沒有使用 grid 的樣式屬性，但我們可以在區塊編輯器中的 [媒體及文字] 區塊找到 grid 的蹤跡。
我們看到 wp-includes/css/dist/block-library/style.css 的第 928 行：

/* wp-includes/css/dist/block-library/style.css Line 928 */
.wp-block-media-text {
    /*!rtl:begin:ignore*/
    direction: ltr;
    /*!rtl:end:ignore*/
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 1fr;
    grid-template-columns: 50% 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto; 
}
.wp-block-media-text.has-media-on-the-right {
    -ms-grid-columns: 1fr 50%;
    grid-template-columns: 1fr 50%; 
}

當我們使用 [媒體及文字] 區塊時，便先固定 50% 的寬度給媒體，剩下的則是文字說明區塊。

回應式設計的重點：@media

我們能不能寫一組 HTML 就把手機版跟電腦版的網站都做好？

事實上，即便到今天，將手機版與電腦版分開製作，仍是許多網站的主要做法。如果手機版的網站與電腦版的網站在功能上有根本的不同，那這樣的做法其實非常合理，也應當這麼做。

但這個世界大多數的網站並不會有功能上的根本差異，頂多是「顯示/不顯示」特定元素的差異。

因此，回應式網站 (Responsive Website) 出現了。藉由偵測螢幕寬度的方式，去改變樣式或是啟用特定功能。用來實踐偵測螢幕寬度的作法，便稱為媒體查詢 (media query)。

媒體查詢的基本語法如下：

@media screen and ( max-width: 600px ){
    /* 在螢幕寬度 600px 以下的樣式 */
}
@media screen and ( min-width: 600px ){
    /* 在螢幕寬度 600px 以上的樣式 */
}

這裡的 screen 指得是在 <head> 中 <link> 屬性 media 的 ```screen````：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="print" href="print.css">

如果樣式有針對列印的 print 去定義樣式，那也可以使用 @media print 的方式去定義樣式。

我們在 Twenty Twenty 的 style.css 的第 4534 行：

@media ( min-width: 660px ) {

	/* Blocks -------------------------------- */

	/* BLOCK: GALLERY */

	figure.wp-block-gallery.alignleft {

		/*rtl:ignore*/
		margin-left: calc(( 100vw - 58rem - 8rem ) / -2);
	}

	figure.wp-block-gallery.alignright {

		/*rtl:ignore*/
		margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
	}

上述的這段樣式，重新定義了在 660px 以上的區塊時，[圖庫] 區塊的左右邊界。